html,
body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;



    ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    ::-webkit-scrollbar-track {
        width: 6px;
        background: rgba(#101F1C, 0.1);
        -webkit-border-radius: 2em;
        -moz-border-radius: 2em;
        border-radius: 2em;
    }

    ::-webkit-scrollbar-thumb {
        background-color: rgba(144, 147, 153, .5);
        background-clip: padding-box;
        min-height: 28px;
        -webkit-border-radius: 2em;
        -moz-border-radius: 2em;
        border-radius: 2em;
        transition: background-color .3s;
        cursor: pointer;
    }

    ::-webkit-scrollbar-thumb:hover {
        background-color: rgba(144, 147, 153, .3);
    }

    .main {
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-rows: minmax(300px, 1fr) 360px;
        grid-template-columns: 260px minmax(300px, 1fr);
        grid-template-areas: "tree editor"
            "tree console";
        gap: 10px;
        padding: 10px;
        box-sizing: border-box;

        .card {
            border-radius: 4px;
            box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
            overflow: auto;

            &.oprate {
                grid-area: oprate;
            }

            &.tree {
                grid-area: tree;
                box-sizing: border-box;
                padding: 10px;
                display: flex;
                flex-direction: column;
                gap: 10px;

                .btn-algorithm {
                    box-sizing: border-box;
                    cursor: pointer;
                    overflow: hidden;
                    border: none;
                    border-radius: 4px;
                    color: #282c34;
                    outline: none;
                    font-size: 14px;
                    padding: 8px 12px;
                    background: #ffffff;
                    display: block;
                    width: 100%;
                    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;

                    &.active {
                        background-color: #282c34;
                        color: #ffffff;
                    }
                }
            }

            &.editor {
                grid-area: editor;
                background-color: #282c34;
            }

            &.console {
                grid-area: console;
                box-sizing: border-box;
                padding: 10px;
                display: flex;
                flex-direction: column;
                gap: 10px;

                >div {
                    height: 36px;
                    line-height: 36px;
                }
            }
        }
    }
}